import React from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';
import { colors } from '@/constants/colors';

interface ChartData {
  label: string;
  value: number;
  color?: string;
}

interface StatsChartProps {
  title: string;
  data: ChartData[];
  type: 'bar' | 'line' | 'pie';
  height?: number;
}

export const StatsChart: React.FC<StatsChartProps> = ({
  title,
  data,
  type,
  height = 200,
}) => {
  const maxValue = Math.max(...data.map(item => item.value));
  
  const renderBarChart = () => {
    return (
      <View style={[styles.chartContainer, { height }]}>
        <View style={styles.yAxis}>
          {[0, maxValue / 2, maxValue].map((value, index) => (
            <Text key={index} style={styles.axisLabel}>
              {Math.round(value)}
            </Text>
          ))}
        </View>
        
        <View style={styles.chart}>
          {data.map((item, index) => (
            <View key={index} style={styles.barContainer}>
              <View 
                style={[
                  styles.bar, 
                  { 
                    height: `${(item.value / maxValue) * 100}%`,
                    backgroundColor: item.color || colors.primary,
                  }
                ]} 
              />
              <Text style={styles.barLabel} numberOfLines={1}>
                {item.label}
              </Text>
            </View>
          ))}
        </View>
      </View>
    );
  };
  
  const renderLineChart = () => {
    // For simplicity, we'll render a bar chart
    // In a real app, we would use a library like react-native-svg to draw a line chart
    return renderBarChart();
  };
  
  const renderPieChart = () => {
    const total = data.reduce((sum, item) => sum + item.value, 0);
    let startAngle = 0;
    
    return (
      <View style={[styles.pieContainer, { height }]}>
        <View style={styles.pieChart}>
          {data.map((item, index) => {
            const percentage = item.value / total;
            const angle = percentage * 360;
            const color = item.color || colors.primary;
            
            // This is a simplified pie chart using border radius
            // In a real app, we would use SVG for a proper pie chart
            return (
              <View
                key={index}
                style={[
                  styles.pieSlice,
                  {
                    backgroundColor: color,
                    width: '100%',
                    height: '100%',
                    transform: [
                      { rotate: `${startAngle}deg` },
                    ],
                    opacity: 0.7 + (index * 0.05),
                  }
                ]}
              />
            );
          })}
        </View>
        
        <View style={styles.pieLegend}>
          {data.map((item, index) => (
            <View key={index} style={styles.legendItem}>
              <View 
                style={[
                  styles.legendColor, 
                  { backgroundColor: item.color || colors.primary }
                ]} 
              />
              <Text style={styles.legendLabel}>{item.label}</Text>
              <Text style={styles.legendValue}>
                {Math.round((item.value / total) * 100)}%
              </Text>
            </View>
          ))}
        </View>
      </View>
    );
  };
  
  return (
    <View style={styles.container}>
      <Text style={styles.title}>{title}</Text>
      
      {type === 'bar' && renderBarChart()}
      {type === 'line' && renderLineChart()}
      {type === 'pie' && renderPieChart()}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.background,
    borderRadius: 16,
    padding: 16,
    marginVertical: 8,
    borderWidth: 1,
    borderColor: colors.border,
  },
  title: {
    fontSize: 16,
    fontWeight: '600',
    color: colors.text.primary,
    marginBottom: 16,
  },
  chartContainer: {
    flexDirection: 'row',
  },
  yAxis: {
    width: 30,
    height: '100%',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
    paddingRight: 4,
  },
  axisLabel: {
    fontSize: 10,
    color: colors.text.tertiary,
  },
  chart: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'flex-end',
    height: '100%',
    borderLeftWidth: 1,
    borderBottomWidth: 1,
    borderColor: colors.border,
    paddingLeft: 8,
  },
  barContainer: {
    flex: 1,
    height: '100%',
    alignItems: 'center',
    justifyContent: 'flex-end',
    paddingHorizontal: 2,
  },
  bar: {
    width: '80%',
    minHeight: 4,
    borderTopLeftRadius: 4,
    borderTopRightRadius: 4,
  },
  barLabel: {
    fontSize: 10,
    color: colors.text.tertiary,
    marginTop: 4,
    textAlign: 'center',
  },
  pieContainer: {
    flexDirection: 'row',
  },
  pieChart: {
    width: 120,
    height: 120,
    borderRadius: 60,
    backgroundColor: colors.card,
    overflow: 'hidden',
    position: 'relative',
  },
  pieSlice: {
    position: 'absolute',
    width: '50%',
    height: '50%',
    top: 0,
    left: '50%',
    transformOrigin: 'bottom left',
  },
  pieLegend: {
    flex: 1,
    marginLeft: 16,
    justifyContent: 'center',
  },
  legendItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 8,
  },
  legendColor: {
    width: 12,
    height: 12,
    borderRadius: 6,
    marginRight: 8,
  },
  legendLabel: {
    fontSize: 12,
    color: colors.text.secondary,
    flex: 1,
  },
  legendValue: {
    fontSize: 12,
    fontWeight: '600',
    color: colors.text.primary,
  },
});